$(function(){
//Con este codigo se hace el efecto que se muevan las cajas cuando no estan llenas
    var field_values = {
            //id        :  value
            'username'  : 'Nombre de usuario',
            'password'  : 'password',
            'nombre'  : 'Nombres',
            'apellido_paterno'  : 'Apellido Paterno',
            'apellido_materno'  : 'Apellido Materno',
            'email'  : 'E-mail'                     
    };
 var field_valuesdos = {
            'nombre_usuario'  : 'Nombre de usuario'
 };

//Con este codigo se obtiene el focus de cada una de las cajas
    $('input#username').inputfocus({ value: field_values['username'] });
    $('input#password').inputfocus({ value: field_values['password'] });
    $('input#nombre').inputfocus({ value: field_values['nombre'] });
    $('input#apellido_paterno').inputfocus({ value: field_values['apellido_paterno'] });
    $('input#apellido_materno').inputfocus({ value: field_values['apellido_materno'] });
    $('input#email').inputfocus({ value: field_values['email'] });

    $('input#nombre_usuario').inputfocus({ value: field_valuesdos['nombre_usuario'] });

//Iniciar barra de progreso
    $('#progress').css('width','0');
    $('#progress_text').html('0% Completo');
    
//Primera capa
    $('#submit_first').click(function(){
        //remove classes
        $('#first_step input').removeClass('error').removeClass('valid');

        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields = $('#first_step input[type=text]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);
                
                error++;
            } else {
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('33% Completo');
                $('#progress').css('width','113px');
                
                //slide steps
                $('#first_step').slideUp();
                $('#second_step').slideDown();     
        } else return false;

    });

//Segunda Capa
    $('form').submit(function(){ return false; });
    $('#submit_second').click(function(){
         //remove classes
        $('#second_step input').removeClass('error').removeClass('valid');

        var fields = $('#second_step input[type=text], #second_step input[type=password]');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
            if( value.length<4 || value==field_values[$(this).attr('id')] ) {
                $(this).addClass('error');
                $(this).effect("shake", { times:3 }, 50);

                error++;
            } else {
                 jAlert('Datos de usuario registrados!','Atencion');
                $(this).addClass('valid');
            }
        });

        if(!error) {
                //update progress bar
                $('#progress_text').html('66% Completado');
                $('#progress').css('width','226px');

                //slide steps
                $('#second_step').slideUp();
                $('#third_step').slideDown();
        } else return false;
    });


// COMPRUEBO QUE TIPO DE USUARIO VA A SER EL PERFIL QUE SE LE DARA AL USUARIO #Tercera capa
    $('#submit_third').click(function(){
       if(jQuery('#admon').attr('checked')==true){
          //update progress bar
                $('#progress_text').html('100% Completo');
                $('#progress').css('width','339px');
                $('#guardarperfil').submit();
          //slide steps
        $('#third_step').slideUp();
        $('#five_step').slideDown();
       }
       else{
           $('#progress_text').html('95% Completo');
           $('#progress').css('width','325px');
           $('#third_step').slideUp();
           $('#fourth_step').slideDown();
       }
    });

//Cuarta capa
    $('#submit_fourth').click(function(){
        //send information to server
        alert('Data sent');

    });

// Capas para ModificarUsuario.php
    $('#submit_uno').click(function(){
        //send information to server
        alert('Data sent');

    });

});